<template>
  <div
    :style="visible ? 'display: block' : 'display: none'"
    class="login-modal active"
    @click="$emit('close')"
  >
    <div class="login-modal-content vh-center">
      <div class="modal-header" @click.stop>
        <h3>SYSTEM INTERFACE</h3>
      </div>
      <div class="login-options" @click.stop>
        <button class="login-option x-login" @click="onLoginByX">
          <span class="option-icon">𝕏</span>
          <span class="option-text">Connect with X</span>
        </button>
        <div class="login-option google-login" @click="onLoginByGoogle">
          <span class="option-icon">G</span>
          <span class="option-text">Connect with Google</span>
          <!-- <div ref="googleLoginBtn" class="btn-inner"></div> -->
        </div>
        <button class="login-option rgb-login" disabled="">
          <span class="option-text">RGB Wallet</span>
          <span class="coming-soon">Coming Soon</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref, onBeforeMount, inject, watch } from 'vue'
import { log } from '../utils/log.js'
import { googleClientId } from '../const/index'
import db from '../utils/localstorage'

const $request = inject('$request')
const loading = ref(false)
const route = useRoute()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const onLoginByGoogle = () => {
  const state = Math.random().toString(36).substring(2)
  const nonce = Math.random().toString(36).substring(2)

  db.save('google_nonce', nonce)
  
  let redirectUri = `${location.origin}/google-callback`
  // let redirectUri = `https://previewdev.blockjoker.org/google-callback`


  if (env.value === 'development') {
    redirectUri = 'http://localhost:8000/api/v2/authorization/google-callback'
  }
  
  const scope = 'email profile'
  const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth')
  authUrl.searchParams.append('client_id', googleClientId)
  authUrl.searchParams.append('nonce', nonce)
  authUrl.searchParams.append('response_type', 'id_token')
  authUrl.searchParams.append('scope', scope)
  // authUrl.searchParams.append('access_type', 'offline')
  authUrl.searchParams.append('redirect_uri', redirectUri)
  authUrl.searchParams.append('state', state)
  authUrl.searchParams.append('prompt', 'select_account')

  sessionStorage.setItem('googleOAuthState', state)
  console.log('authUrl.toString()', authUrl.toString())
  location.href = authUrl.toString()
}

const onLoginByX = async () => {
  loading.value = true
  try {
    const { data } = await $request.login(`/authorization/url?invite=${route.query.invite_code || ''}`)
    if (!data.ok) {
      throw new Error('Login failed')
    }
    window.location.href = data.result
  } catch (error) {
    log(error)
    loading.value = false
  }
}
</script>

<style lang="less" scoped>
.login-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-modal.active {
  display: flex;
}

.login-modal-content {
  background: transparent;
  padding: 30px;
  width: 90%;
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: rgba(0, 246, 255, 0.9);
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 246, 255, 0.3);
}

.login-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 360px;
  margin: 0 auto;
}

.login-option {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 25px;
  background: 
      linear-gradient(rgba(0, 246, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 246, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid rgba(0, 246, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 70px;
  background-color: rgba(0, 246, 255, 0.02);
}

.login-option:hover {
  background: 
      linear-gradient(rgba(0, 246, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 246, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  border-color: rgba(0, 246, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(0, 246, 255, 0.15);
}

.option-icon {
  font-family: var(--font-display);
  font-size: 22px;
  color: rgba(0, 246, 255, 0.9);
  min-width: 30px;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 246, 255, 0.3);
}

.option-text {
  font-family: var(--font-mono);
  font-size: 15px;
  color: rgba(0, 246, 255, 0.9);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0, 246, 255, 0.2);
}

.coming-soon {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(0, 246, 255, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 246, 255, 0.15),
      transparent
  );
  transition: left 0.5s ease;
}

.login-option:hover::before {
  left: 100%;
}

.login-option .content-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 200px;
}

.login-option.rgb-login {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
  justify-content: center;
}

.login-option.rgb-login:hover {
  transform: none;
  background: 
      linear-gradient(rgba(0, 246, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 246, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  border-color: rgba(0, 246, 255, 0.2);
  box-shadow: none;
  background-color: rgba(0, 246, 255, 0.02);
}


.btn-inner {
  display: inline-block;
  height: 100%;
  width: 100%;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;

  /deep/ div {
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .login-options {
    width: 100%;
  }
}
</style>
